{extend name="index_layout"/}
{block name="main"}
<style>
    .type-select{
        display:none;
    }
</style>
<form class="layui-form" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label"> <span class="bitian">*</span> 字段名称 </label>
        <div class="layui-input-block">
            <input type="text" name="title" value="{$custom.title}" lay-verify="required" autocomplete="off" placeholder="字段名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"> <span class="bitian">*</span> 字段类型 </label>
        <div class="layui-input-block">
            <select name="field_type" id="" class="layui-disabled" disabled lay-filter="field">
                <option value="">请选择类型</option>
                <option {if $custom.field_type == 'text'} selected {/if} value="text">文本</option>
                <option {if $custom.field_type == 'number'} selected {/if} value="number">数字</option>
                <option {if $custom.field_type == 'time'} selected {/if} value="time">时间</option>
                <option {if $custom.field_type == 'files'} selected {/if} value="files">附件</option>
                <option {if $custom.field_type == 'radio'} selected {/if} value="radio">单选框</option>
                <option {if $custom.field_type == 'checkbox'} selected {/if} value="checkbox">复选框</option>
                <option {if $custom.field_type == ''} selected {/if} value="">关联对象</option>
                <option {if $custom.field_type == ''} selected {/if} value="">关联属性</option>
            </select>
        </div>
    </div>
    <input type="hidden" name="type" value="{$type}">
    <input type="hidden" name="id" value="{$custom.id}">
    {if $custom.field_type == 'text'}
        <div id="text">
            <div class="layui-form-item">
                <label class="layui-form-label"> 允许扫码输入 </label>
                <div class="layui-input-block">
                    <select name="is_scan" id="">
                        <option {if $customDetail.is_can == 0} selected {/if} value="0">否</option>
                        <option {if $customDetail.is_can == 1} selected {/if} value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 可修改扫码结果 </label>
                <div class="layui-input-block">
                    <select name="can_edit_scan" id="">
                        <option {if $customDetail.can_edit_scan == 0} selected {/if} value="0">否</option>
                        <option {if $customDetail.can_edit_scan == 1} selected {/if} value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 隐藏条件 </label>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                    <span>当满足此条件时此字段隐藏</span>
                    <div style="display: none;" id="hidden">{$customDetail.hidden}</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 字段属性 </label>
                <div class="layui-input-block">
                    <input name="attribute_text[]" {if strpos($customDetail.attribute,'1') !== false} checked {/if} value="1" type="checkbox" title="只读">
                    <input name="attribute_text[]" {if strpos($customDetail.attribute,'3') !== false} checked {/if} value="3" type="checkbox" title="多行">
                    <input name="attribute_text[]" {if strpos($customDetail.attribute,'2') !== false} checked {/if} value="2" type="checkbox" title="必填">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 引导文字 </label>
                <div class="layui-input-block">
                    <input type="text" name="placeholder" value="{$customDetail.placeholder}" autocomplete="off" placeholder="填写完显示在框里" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 提示说明 </label>
                <div class="layui-input-block">
                    <textarea name="tips" cols="30" rows="10">{$customDetail.tips}</textarea>
                </div>
            </div>
        </div>
    {elseif $custom.field_type == 'number'/}
    <div id="number">
        <div class="layui-form-item">
            <label class="layui-form-label"> 隐藏条件 </label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                <span>当满足此条件时此字段隐藏</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 字段属性 </label>
            <div class="layui-input-block">
                <input name="attribute_number[]" {if strpos($customDetail.attribute,'1') !== false} checked {/if} value="1" type="checkbox" title="只读">
                <input name="attribute_number[]" {if strpos($customDetail.attribute,'2') !== false} checked {/if} value="2" type="checkbox" title="必填">
                <input name="attribute_number[]" {if strpos($customDetail.attribute,'3') !== false} checked {/if} value="3" type="checkbox" title="显示千分位分割符">
                <input name="attribute_number[]" {if strpos($customDetail.attribute,'4') !== false} checked {/if} class="numbers" lay-filter="numbers" value="4" type="checkbox" title="小数位数">
                {if strpos($customDetail.attribute,'4') !== false}
                <input type="number" value="{$customDetail.xiaoshu}" name="xiaoshu" placeholder="请输入小数位数">
                {else}
                <input type="number" style="display: none;" name="xiaoshu" placeholder="请输入小数位数">
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 引导文字 </label>
            <div class="layui-input-block">
                <input type="text" name="placeholder" value="{$customDetail.placeholder}" autocomplete="off" placeholder="填写完显示在框里" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 提示说明 </label>
            <div class="layui-input-block">
                <textarea name="tips" cols="30" rows="10">{$customDetail.tips}</textarea>
            </div>
        </div>
    </div>
    {elseif $custom.field_type == 'time'/}
    <div id="time">
        <div class="layui-form-item">
            <label class="layui-form-label"> 隐藏条件 </label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                <span>当满足此条件时此字段隐藏</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 字段属性 </label>
            <div class="layui-input-block">
                <input name="attribute_time[]" {if strpos($customDetail.attribute,'1') !== false} checked {/if} value="1" type="checkbox" title="只读">
                <input name="attribute_time[]" {if strpos($customDetail.attribute,'2') !== false} checked {/if} value="2" type="checkbox" title="必填">
            </div>
        </div>
    </div>
    {elseif $custom.field_type == 'files'/}
    <div id="files">
        <div class="layui-form-item">
            <label class="layui-form-label"> 隐藏条件 </label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                <span>当满足此条件时此字段隐藏</span>
            </div>
        </div>
    </div>
    {elseif $custom.field_type == 'radio'/}
    <div id="radio">
        <div class="layui-form-item radio-select">
            <label class="layui-form-label"> 设置可选范围 </label>
            {volist name="customDetail.select" id="item"}
            <div class="layui-input-block">
                <input type="text" value="{$item}" name="values[]" style="width:50%;" class="layui-input">
            </div>
            {/volist}
        </div>
        <button class="layui-btn layui-btn-xs add-line" type="button" style="margin-left:20%;">新增可选项</button>
        
        <div class="layui-form-item" style="margin-top: 2em;">
            <label class="layui-form-label"> 隐藏条件 </label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                <span>当满足此条件时此字段隐藏</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 字段属性 </label>
            <div class="layui-input-block">
                <input name="attribute_radio[]" {if strpos($customDetail.attribute,'1') !== false} checked {/if} value="1" type="checkbox" title="必选">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 引导文字 </label>
            <div class="layui-input-block">
                <input type="text" name="placeholder" value="{$customDetail.placeholder}" autocomplete="off" placeholder="填写完显示在框里" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 提示说明 </label>
            <div class="layui-input-block">
                <textarea name="tips" cols="30" rows="10">{$customDetail.tips}</textarea>
            </div>
        </div>
    </div>
    {elseif $custom.field_type == 'checkbox'/}
    <div id="checkbox" class="type-select">
        <div class="layui-form-item checkbox-select">
            <label class="layui-form-label"> 设置可选范围 </label>
            <div class="layui-input-block">
                <input type="text" name="checkbox-values[]" style="width:50%;" class="layui-input">
            </div>
        </div>
        <button class="layui-btn layui-btn-xs add-line-checkbox" type="button" style="margin-left:20%;">新增可选项</button>
        
        <div class="layui-form-item" style="margin-top: 2em;">
            <label class="layui-form-label"> 隐藏条件 </label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-green hide" hide-type="{$type}" type="button">添加</button>
                <span>当满足此条件时此字段隐藏</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 字段属性 </label>
            <div class="layui-input-block">
                <input name="attribute_checkbox[]" value="1" type="checkbox" title="必填">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 引导文字 </label>
            <div class="layui-input-block">
                <input type="text" name="placeholder" autocomplete="off" placeholder="填写完显示在框里" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> 提示说明 </label>
            <div class="layui-input-block">
                <textarea name="tips" cols="30" rows="10"></textarea>
            </div>
        </div>
    </div>
    {/if}
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter='ds' type="button" data-refresh="false">立即提交</button>
            <button class="layui-btn layui-btn-normal" type="button" onclick="var index1 = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index1);">返回</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<script>
    layui.use(['form'], function() {
        var form = layui.form;
        var $ = layui.jquery;
        $('.add-line').on('click',function(){
            var _html = '<div class="layui-input-block">'+
                '<input type="text" name="values[]" style="width:50%;float:left;"" class="layui-input">'+
                '<button class="layui-btn layui-btn-xs layui-btn-danger remove-radio" style="margin-top: 0.5em;margin-left: 1em;">移除</button><div style="clear: both;"></div>'+
            '</div>';
            $('.radio-select').append(_html);
        })
        $('body').on('click','.remove-radio',function(){
            $(this).parent('.layui-input-block').remove();
        })
        
        $('.add-line-checkbox').on('click',function(){
            var _html = '<div class="layui-input-block">'+
                '<input type="text" name="checkbox-values[]" style="width:50%;float:left;"" class="layui-input">'+
                '<button class="layui-btn layui-btn-xs layui-btn-danger remove-checkbox" style="margin-top: 0.5em;margin-left: 1em;">移除</button><div style="clear: both;"></div>'+
            '</div>';
            $('.checkbox-select').append(_html);
        })
        $('body').on('click','.remove-checkbox',function(){
            $(this).parent('.layui-input-block').remove();
        })
        form.on('checkbox(numbers)',function(data){
            var status = $(".numbers").prop("checked");
            if(status){
                $('input[name="xiaoshu"]').css('display','inline-block');
            }else{
                $('input[name="xiaoshu"]').css('display','none');
            }
        })
        form.on('select(field)',function(data){
            $('.type-select').css('display','none');
            var type = data.value;
            $('#'+type).css('display','block');
        })
        form.on('submit(ds)',function(data){
            var param = data.field;
            var hidden = $('#hidden').html();
            param.hidden = hidden;
            $.post('{:url("editPost")}',param,function(res){
                if(res.code > 0){
                    layer.msg('编辑成功');
                    setTimeout(() => {
                        var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index1);
                        parent.location.reload();
                    }, 500);
                }else{
                    layer.msg(res.msg);
                }
            },'json');
        })
        $('.hide').on('click',function(){
            var type = $(this).attr('hide-type');
            layer.open({
                type:2,
                title:'隐藏条件',
                content:'{:url("hide")}?type='+type,
                area: ['800px','600px'],
                btn:['确定','取消'],
                success: function(dom) {
                    var html = $('#hidden').html();
                    // console.log(html);
                    html = htmlRestore(html);
                    console.log(html);
                    var domhtml = $(dom[0]).find("iframe").eq(0).contents();
                    domhtml.find("#content").val(html);
                },
                yes: function (index,dom) {
                    var domhtml = $(dom[0]).find("iframe").eq(0).contents();
                    var content = domhtml.find("#content").val();
                    $('#hidden').html(content);
                    layer.close(index);
                }
            })
        })

        /**
         *  转义字符还原成html字符
         * @param str
         * @returns {string}
         * @constructor
         */
        function htmlRestore(str) {
            var s = "";
            if (str.length === 0) {
                return "";
            }
            s = str.replace(/&amp;/g, "&");
            s = s.replace(/&lt;/g, "<");
            s = s.replace(/&gt;/g, ">");
            s = s.replace(/&nbsp;/g, " ");
            s = s.replace(/&#39;/g, "\'");
            s = s.replace(/&quot;/g, "\"");
            return s;
        }
    });
</script>
{/block}